<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>非父子传递</title>
		<script type="text/javascript" src="js/mitt.umd.js"></script>
		<script src="https://unpkg.com/vue@next"></script>
		<script src="https://unpkg.com/mitt/dist/mitt.umd.js"></script>
	</head>
	<body>
		<!-- 豆雪琴  209010214 -->
		<div id="root">
			<c1></c1>
			<c2></c2>
		</div>
	</body>
	<script>
		const emitter = window.mitt();//获取事件总线
		const app = Vue.createApp({
			components:{
				'c1':{
					methods:{
						sendMessage(){
							emitter.emit("event1","hello");//子组件c1用emit触发事件然后将数据发送给事件总线
						}
					},
					template:`
					<div>
						<h1>子组件1向"总线"发送数据</h1>
						<button @click="sendMessage()">发送</button>
					</div>
					`
				},
				'c2':{
					data(){
						return{
							event2 :""
						}
					},
					mounted(){
						//子组件c2接收事件总线发送过来的数据，组件c1中的数据就传到组件c2中了
						emitter.on("event1",e =>{
							this.event2 = e;
						})
					},
					template:`
						<div>
							<h1>子组件2接收到的数据:{{event2}}</h1>
						</div>
					`
				}
				
			}
		}).mount("#root")
	</script>
</html>
